.DataTableContainer {
    $cell-border: 1px solid $gray-10;

    // header
    $header: $gray-5;
    $header-hover: $gray-20;

    // rows
    $light-fill: $gray-5;
    $hover-fill: #f0f0f0;
    $dark-fill: $gray-20;

    // closest time notice
    $info-icon: $gray-30;

    display: flex;
    align-items: center;
    justify-content: center;
    color: $dark-text;
    font-size: 0.875em;

    .DataTable {
        width: 100%;
        height: 100%;
        display: flex; // necessary to make .table-wrapper scrollable
        flex-direction: column;

        .caption {
            flex-shrink: 0;
            font-weight: 700;
            padding-top: 2px;
            padding-bottom: 14px;

            .title-fragments {
                color: $light-text;
                font-weight: 500;
            }
        }

        .table-wrapper {
            overflow: auto;
            border: $cell-border;
        }

        .title-fragments {
            color: $light-text;
            font-weight: 500;
        }
    }

    table {
        line-height: 1.333em;
        border: none;
        background: white;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0px;

        // make header sticky
        thead {
            position: sticky;
            z-index: 20;
            top: 0;
        }

        // make entity column and entity header sticky
        .entity,
        .above-entity {
            position: sticky;
            left: 0;
            z-index: 10;
            background-color: #fff;
        }

        th.entity,
        th.above-entity {
            top: 0;
            background-color: $header;
        }

        // make title row sticky
        tr.title td:first-child {
            position: sticky;
            left: 0;
            z-index: 10;
        }

        // applies to all cells
        th,
        td {
            padding: 8px 16px;
            white-space: nowrap;

            &:not(.entity) {
                vertical-align: bottom;
                text-align: right;
            }
        }

        // adds border on the right of the entity column
        .entity,
        .above-entity {
            border-right: $cell-border;
        }

        // adds a border on the right of each dimension column
        tr > th.dimension ~ th.dimension,
        tr > th.subdimension-first ~ th.subdimension-first,
        tr > td.cell-first ~ td.cell-first {
            border-left: $cell-border;
        }

        thead {
            th {
                background-color: $header;
                line-height: 19px;
                border-bottom: $cell-border;
                font-weight: 700;
                vertical-align: bottom;

                &.dimension,
                &.entity,
                &.subdimension {
                    padding-top: 10px;
                    padding-bottom: 10px;
                }

                &.dimension {
                    text-align: left;

                    .name {
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-weight: 500;
                        color: $light-text;

                        .title-text {
                            font-weight: 700;
                            color: $dark-text;
                        }
                    }

                    .title-fragments {
                        text-wrap: auto;
                    }

                    .description {
                        color: $dark-text;
                        text-align: left;
                        font-weight: 500;
                    }
                }
            }

            th.sortable {
                cursor: pointer;

                &:hover {
                    background-color: $header-hover;
                    border-color: $header-hover;
                }

                .content {
                    display: flex;
                    align-items: start;
                    justify-content: flex-end;
                    gap: 6px;
                }

                &.entity .content {
                    justify-content: flex-start;
                }

                .sort-icon {
                    color: $gray-50;
                    font-size: 13px;
                    width: 19px; // keeps column widths fixed when sorting
                    text-align: right;

                    &.active {
                        color: $dark-text !important;
                    }
                }

                &:hover .sort-icon {
                    color: $gray-60;
                }
            }
        }

        tbody {
            // alternating row colors
            tr:not(.title):nth-child(2n) td {
                background-color: $light-fill;
            }

            td.entity {
                white-space: normal;
            }

            tr:not(.title):hover td {
                background-color: $hover-fill !important;
            }

            tr.title td {
                text-align: left;
                background-color: $dark-fill;
                font-weight: 700;
            }

            .closest-time-notice-icon {
                cursor: default;

                .icon {
                    line-height: 12px;
                    font-size: 12px;
                    color: $info-icon;
                }

                & + span {
                    margin-left: 6px;
                }
            }
        }
    }
}

&.GrapherComponentMedium {
    .DataTable .caption {
        padding-top: 4px;
        padding-bottom: 8px;
    }
}

&.GrapherComponentNarrow {
    .DataTable .caption {
        padding-bottom: 4px;
    }
}

.closest-time-notice-tippy {
    max-width: 208px;
    text-align: center;
    padding: 4px;
}
